import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// JSX语法学习
// 1、优点：
  // 1.1 JSX执行更快，编译成javascript语法时进行优化
  // 1.2 类型更安全，如果编译过程出现错误就无法继续，及时发现错误
  // 1.3 JSX语法便编写和原生js比更快速

  // 2. 注意：
    // 2.1 jsx语法必须要有根节点
    // 2.2 正常的html元素要小写，如果大写就是组件

  // 3.JSX表达式
  // 3.1 由HTML元素构成
  // 3.2 如果中间需要插入变量用{};
  // 3.3 {}中间可以使用表达式也可以使用JSX对象
  // 3.4 属性和HTML一样用{}插入内容


  // 一、jsx的{}语法支持变量
  let time = new Date().toLocaleTimeString();
  let str ='jsx语法学习--当前时间是：';
  let element = (
    <div>
      <h4>1.jsx的{}语法支持变量---{str+time}</h4>
    </div>
  )

  // 二、jsx的{}语法支持表达式
  let man = '发热';
  let element3 =(
    <div>
      <h6>element3----不用隔离</h6>
    </div>
  )
  let element2 =(
    <div>
      <h4>2.jsx语法{}支持表达式---{man ==='发热'?'发热':'不发热'}</h4>
      <h5>{man ==='发热'? <button>隔离</button> : element3}</h5>
    </div>
  )
  // 三、jsx语法关于属性的写法
  let bgClass = 'bgClass';
  let logo = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
  let element4 =(
    <div className={bgClass}> 
      <img src={logo}></img>
    </div>
  )

// 四、jsx的语法样式和注释
// 4.1 class\style样式中不允许存在多个class   <div class='abc' class ='123'></div>是错误的写法
// 4.2 style中如果存在多个单词的属性名称第二个单词首字母需要大写，或则使用引号否则会报错
let exampleStyle ={
  borderBottom:'1px solid red',
  'background-color':'green',
  width:'200px',
  height:'300px'
}

// 4.3 多个类共存的操作
// 第一种：
// let ClassStr = 'bgColor';
// let element5 =(
//   <div className={'abc '+ClassStr}>helloWord!</div>
// )

// 第二种：
let classArr= ['aaa','bbb'].join(' ');
let element5 =(
  <div className={classArr} style={exampleStyle}>helloWord!</div>
)
// 4.4 注释必须在括号表达式内写，否则表错{/*这是jsx语法的注释*/}


// 五、组件
// 函数式组件和类组件的区别和使用，函数式组件比较简单，一般用于静态没有交互内容的的组件页面。类组件又称为动态组件，
// 一般会有交互或数据操作
// 组件包括函数组件、类组件和复合组件

// 5.1 函数式组件（静态组件）
function Childcom (props) {
  // console.log('我是函数式组件childcom',props);
  let title = '我是函数式组件childcom';
  let weather = props.weather;
  let isGo = weather ==="下雨" ? '不能出门' : '可以出门';
  return (
    <div>
      <h3>{title}</h3>
      <div>
        是否出门？
        {isGo}
      </div>
    </div>
  )
}

// 5.2 类组件（动态组件）、复合组件
class HelloWord extends React.Component{
  render(){
    console.log(this);
    return (
      <div>
        <h5>这是类组件HelloWord</h5>
        <h6>名字:{this.props.name}</h6>
        <Childcom weather={this.props.weather}/>
      </div>
    )
  }
}


// 六、react中的状态
class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state={
      time:new Date().toLocaleTimeString()
    }
  };
  componentDidMount(){//组件渲染完成时候调用的函数
    setInterval(()=>{
      // console.log(this.state.time);
      //this.state.time =  new Date().toLocaleTimeString() 是错误的写法
      // 切勿直接修改state的数据，必须通过setState的方式进行修改，通过this.setState修改数据后并不会立即修改DOM上的数据，
      // react会这个函数所有修改的状态改变后进行统一的修改，提升性能，微信小程序也是借鉴类react的这种策略
      this.setState({
        time:new Date().toLocaleTimeString()
      })
    },1000)
  };
  render(){
    return (
      <div>react状态-当前时间是：{this.state.time}</div>
    )
  }
}

// 七、tab切换效果
class Tab extends React.Component{
  constructor(props){
    super(props);
    this.state={
      c1:'content active',
      c2:'content'
    };
    this.clickEvent = this.clickEvent.bind(this);
  };
  clickEvent(e){
    // console.log('clickEvent',e,this);
    let index = e.target.dataset.index;
    if(index == 1){
      this.setState({
        c1:'content active',
        c2:'content'
      })
    }else{
      this.setState({
        c1:'content',
        c2:'content active'
      })
    }
  };
  render(){
    return (
      <div>
        <button data-index='1' onClick={this.clickEvent}>内容1</button>
        <button data-index='2' onClick={this.clickEvent}>内容2</button>
        <div className={this.state.c1}>我是内容一</div>
        <div className={this.state.c2}>我是内容二</div>
      </div>
    )
  }

}

// ReactDOM.render(
//   <HelloWord weather='下雨' name='zhangsan'/>,
//   document.getElementById("root")
// );

ReactDOM.render(
  <Tab/>,
  document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
